<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="./CSS/水果购物车.css">

<body>
    <div class="box" id="app">
        <div class="box1">
            <img src="./image/背景图1.jpg" height="300px" width="1000px">
        </div>
        <div class="box2">
            <table>
                <tr>
                    <th>选中</th>
                    <th>名称</th>
                    <th>图片</th>
                    <th>单价</th>
                    <th>个数</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(item,index) in fruits" :key="item.id">
                    <td><input type="checkbox" v-model="item.isChecked"></td>
                    <td>{{item.name}}</td>
                    <td><img :src="item.src" :style="{width:'60px',height:'60px'}"></td>
                    <td>{{item.price}}</td>
                    <td>
                        <button :style="{width:'20px',height:'20px'}" @click="sub(item.id)"
                            :disabled="item.count===0">-</button>
                        <span>{{item.count}}</span>
                        <button :style="{width:'20px',height:'20px'}" @click="add(item.id)">+</button>
                    </td>
                    <td>{{item.total}}</td>
                    <td><button @click="del(item.id)">删除</button></td>
                </tr>
                <tr>
                    <td :colspan="5" :style="{textAlign:'left'}"><input type="checkbox" v-model="isAll">全选</td>
                    <td :colspan="2">总价：￥<span>{{cnt}}</span><button>结算（{{many}}）</button></td>
                </tr>
            </table>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        const defaultList = [
            { id: 1, name: '柿子', src: './image/柿子.jpg', price: 6, count: 0, total: 0, isChecked: false },
            { id: 2, name: '桑葚', src: './image/桑葚.jpg', price: 4, count: 0, total: 0, isChecked: false },
            { id: 3, name: '梨子', src: './image/梨子.jpg', price: 3, count: 0, total: 0, isChecked: false },
            { id: 4, name: '苹果', src: './image/苹果.jpg', price: 2.5, count: 0, total: 0, isChecked: false },
            { id: 5, name: '草莓', src: './image/草莓.jpg', price: 5.5, count: 0, total: 0, isChecked: false },
            { id: 6, name: '荔枝', src: './image/荔枝.jpg', price: 2.4, count: 0, total: 0, isChecked: false },
            { id: 7, name: '蓝莓', src: './image/蓝莓.jpg', price: 7, count: 0, total: 0, isChecked: false },
            { id: 8, name: '香蕉', src: './image/香蕉.jpg', price: 2.1, count: 0, total: 0, isChecked: false }
        ]
        // localStorage.setItem('list', JSON.stringify(defaultList))
        const app = new Vue({
            el: '#app',
            data: {
                // 全部删完过后 有bug
                fruits: JSON.parse(localStorage.getItem('list')) || defaultList
            },
            methods: {
                add(id) {
                    this.fruits[id - 1].count = this.fruits[id - 1].count + 1
                    this.sum(id)
                },
                sub(id) {
                    if (this.fruits[id - 1].count > 0) {
                        this.fruits[id - 1].count = this.fruits[id - 1].count - 1
                        this.sum(id)
                    } else {
                        alert("主人数目已经为0啦~~")
                    }
                },
                sum(id) {
                    this.fruits[id - 1].total = (this.fruits[id - 1].price * this.fruits[id - 1].count).toFixed(2)
                },
                del(id) {
                    console.log(this.fruits.length)
                    this.fruits = this.fruits.filter((item) => {
                        return item.id !== id
                    })
                    console.log(this.fruits.length)
                }
            },
            computed: {
                cnt() {
                    return this.fruits.reduce((sum, item) => {
                        sum = Number(sum)
                        const total = Number(item.total);
                        sum += total;
                        // 注意经过toFixed处理过后 sum变成了字符串
                        return Number(sum).toFixed(2);
                    }, 0.0)
                },
                many() {
                    return this.fruits.reduce((sum, item) => {
                        return sum += Number(item.count)
                    }, 0)
                },
                // computed属性计算：只能获取不能设置,要设置需要写完整写法
                // isAll() {
                //     return this.fruits.every((item) => item.isChecked)
                // }
                // 完整写法
                isAll: {
                    get() {
                        return this.fruits.every((item) => item.isChecked)
                    },
                    set(value) {
                        // 基于拿到的布尔值，要让所有的小选框同步状态
                        this.fruits.forEach(element => {
                            element.isChecked = value
                        });
                    }
                }
            },
            watch: {
                fruits: {
                    deep: true,
                    handler(newValue) {
                        // 需要将变化后的newValue存入本地（转Json）
                        localStorage.setItem('list', JSON.stringify(newValue))
                    }
                }
            }
        })
    </script>
</body>

</html>